<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding:0px;margin:0px;
			}
			.box{
				width: 200px;
				height: 300px;
				background: red;
				position: absolute;
				top:50%;
				margin-top: -150px;
				left:-200px;
			}
			.box span{
				width: 20px;height: 60px;
				background: blue;
				position: absolute;
				top:50%;
				margin-top: -30px;
				right:-20px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<span>分享到</span>
		</div>
		<script type="text/javascript">
			function getstyle(obj,attr){
				if(obj.currentStyle){
					return obj.currentStyle[attr];
				}else{
					return getComputedStyle(obj)[attr];
				}
			}
			function move(obj,json,fn){
				clearInterval(obj.timer);
				obj.timer=setInterval(function(){
					var bstop=true;//假设所有的属性都到目标点了。
					for(var attr in json){
						//求当前值
						var current=null;
						if(attr=='opacity'){
							current=Math.round(getstyle(obj,attr)*100);
						}else{
							current=parseInt(getstyle(obj,attr));
						}
						//判断速度
						var speed=(json[attr]-current)/7;
						speed=speed>0?Math.ceil(speed):Math.floor(speed);
						//判断定时器停止和输出
						if(current!=json[attr]){//当前值不等于目标，继续运动。
							if(attr=='opacity'){
								obj.style[attr]=(current+speed)/100;
								obj.style.filter='alpha(opacity='+(current+speed)+')';
							}else{
								obj.style[attr]=current+speed+'px';
							}
							bstop=false;
						}
					}
					if(bstop){
						clearInterval(obj.timer);
						fn&&fn();	
					}
						
				},20)
			}
			
			var oDiv=document.getElementsByTagName('div')[0];
			var oSpan=oDiv.getElementsByTagName('span')[0];
			oDiv.onmouseover=function(){
				move(oDiv,{left:0});
			}
			oDiv.onmouseout=function(){
				move(oDiv,{left:-200});
			}
		</script>
	</body>
</html>
